<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bs5的网格系统</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bs03.css">
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col">网格系统就是压力布局</div>
      <div class="col">所以是自适应的</div>
      <div class="col">一些信息</div>
    </div>
  </div>
  <hr>
  <!-- 
    12等分网格系统，自带媒体查询功能
    	xs<576px	sm≥576px	md≥768px	lg≥992px	xl≥1200px	xxl≥1400px
  -->
  <div class="container-fluid">
    <!-- 媒体查询版本 -->
    <div class="row">
      <div class="col-md-6 col-lg-4 col-xl-3">列1</div>
      <div class="col-md-6 col-lg-4 col-xl-3">列2</div>
      <div class="col-md-6 col-lg-4 col-xl-3">列3</div>
      <div class="col-md-6 col-lg-4 col-xl-3">列4</div>
      <div class="col-md-6 col-lg-4 col-xl-3">列5</div>
    </div>
    <!-- 固定版本 -->
    <div class="row">
      <div class="col-6">固定二分</div>
      <div class="col-6">不需要媒体查询</div>
    </div>
  </div>

  <!-- 媒体查询的显示和消失 -->
  <div>
    <div class="d-sm-none d-md-block">电脑版本</div>
    <div class="d-sm-block d-md-none">手机版本</div>
  </div>

  <!-- 对话框，tabindex="-1"是防止焦点离开对话框范围
    data-bs-backdrop="static"表示点击遮罩层不要关闭对话框
  -->
  <div id="div-dialog" data-bs-backdrop="static" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <div class="modal-title">一个对话框</div>
          <span data-bs-toggle="modal" data-bs-target="#div-dialog" class="btn-close"></span>
        </div>

        <div class="modal-body">

          <div class="row">
            <div class="col-6">
              <input type="text" class="form-control">
            </div>
            <div class="col-6">
              <input type="text" class="form-control">
            </div>
          </div>

          <div class="row">
            <div class="col-12">
              <input type="text" class="form-control">
            </div>
          </div>

        </div>

        <div class="modal-footer">
          <span class="btn btn-primary">保存</span>
          <span data-bs-toggle="modal" 
            data-bs-target="#div-dialog" 
            class="btn btn-danger">关闭</span>
        </div>

      </div>

    </div>

  </div>

  <!-- 
    data-bs-toggle="modal" 表示触发对话框动作
    data-bs-target="#div-dialog" 表示触发指定id的对话动作
  -->
  <span id="btnClose" data-bs-toggle="modal" data-bs-target="#div-dialog" class="btn btn-primary">打开对话框</span>

  <script src="js/bootstrap.bundle.min.js"></script>

  <script src="js/bs03.js"></script>
</body>

</html>